<template>
	<div class="mymenu">
		<!-- $route.path 当前路径  ，index 里面写 对应页面的路径 
    :collapse="true" 菜单展开收起的状态值
    -->
		<el-menu
			:default-active="$route.path"
			class="el-menu-vertical-demo"
			@open="handleOpen"
			@close="handleClose"
			background-color="#545c64"
			text-color="#fff"
			active-text-color="#ffd04b"
			:collapse="sidebar.opened"
		>
			<router-link to="/">
				<el-menu-item index="/home" class="nav-button">
					<span class="iconfont icon-home"></span>
					<span>首页</span>
				</el-menu-item>
			</router-link>
			<router-link to="/super" v-if="roleid == 1">
        <el-menu-item index="/super">
          <i class="iconfont icon-home"></i>
          <span slot="title">超级管理员</span>
        </el-menu-item>
      </router-link>
			<el-submenu index="1">
				<template slot="title" class="nav-button">
					<div class="sub-top">
						<i class="iconfont">&#xe634;</i>
						<span>商品</span>
					</div>
				</template>
				<el-menu-item-group>
					<router-link to="/pms/product">
						<el-menu-item index="/pms/product">
							<i class="el-icon-menu"></i>
							<span>商品列表</span>
						</el-menu-item>
					</router-link>
					<router-link to="/pms/productadd">
						<el-menu-item index="/pms/productadd">
							<i class="el-icon-circle-plus-outline"></i>
							<span>添加商品</span>
						</el-menu-item>
					</router-link>
					<router-link to="/pms/productCate">
						<el-menu-item index="/pms/productCate">
							<i class="el-icon-s-operation"></i>
							<span>商品分类</span>
						</el-menu-item> </router-link
					><router-link to="/pms/productAttr">
						<el-menu-item index="/pms/productAttr">
							<i class="el-icon-rank"></i>
							<span>商品类型</span>
						</el-menu-item> </router-link
					><router-link to="/pms/brand">
						<el-menu-item index="/pms/brand">
							<i class="el-icon-collection-tag"></i>
							<span>品牌管理</span>
						</el-menu-item>
					</router-link>
				</el-menu-item-group>
			</el-submenu>
		</el-menu>
	</div>
</template>
<script>
//左侧菜单可以写成 循环的形式:this.$router
//获取vuex中的左侧菜单的状态值,复制给:collapse
import { mapGetters } from "vuex";
export default {
	name: "sidebar",
	methods: {
		handleOpen() {
			console.log("打开菜单");
		},
		handleClose() {
			console.log("关闭菜单");
		},
	},
	computed: {
		...mapGetters(["sidebar", "roleid"]),
	},
};
</script>
<style scoped lang="scss">
.mymenu {
	.el-menu {
		border-right: none;
		.nav-button {
			display: flex;
			align-items: center;
		}
		a {
			text-decoration: none;
		}
	}
}
</style>
